<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <!-- 使用的 jQuery 所以需要引入 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="welcome">
            <div class="pinkbox">
                <div class="signup nodisplay">
                    <h1>注册</h1>
                    <form autocomplete="off" id="signupForm"> <!-- 确保存在此 id 的元素 -->
                        <input type="text" placeholder="账号" id="signupUsername">
                        <input type="password" placeholder="密码" id="signupPassword">
                        <button class="button submit">创建账号</button>
                    </form>
                </div>
                <div class="signin">
                    <h1>登录</h1>
                    <form class="more-padding" autocomplete="off" id="signinForm">
                        <input type="text" placeholder="账号" id="signinUsername">
                        <input type="password" placeholder="密码" id="signinPassword">
                        <div class="checkbox">
                            <input type="checkbox" id="remember" />
                            <label for="remember">记住我</label>
                        </div>
                        <button class="button submit">登录</button>
                    </form>
                </div>
            </div>
            <div class="leftbox">
                <h2 class="title"><span>聊天</span>& <br> 系统</h2>
                <p class="desc">最适合年轻人<span>新潮流</span></p>
                <img class="flower smaller" src="https://image.ibb.co/d5X6pn/1357d638624297b.jpg" alt="1357d638624297b"
                    border="0">
                <p class="account">已有账号</p>
                <button class="button" id="signin">登录</button>
            </div>
            <div class="rightbox">
                <h2 class="title"><span>聊天</span>& <br> 系统</h2>
                <p class="desc">更懂生活<span>更懂你</span></p>
                <img class="flower" src="https://preview.ibb.co/jvu2Un/0057c1c1bab51a0.jpg" />
                <p class="account">还没有账号?</p>
                <button class="button" id="signup">注册</button>
            </div>
        </div>
        <div id="response"></div> <!-- 用于显示服务器响应 -->
    </div>
    <script>
        // 当点击注册的时候
        $('#signup').click(function () {
            // 平移粉色的盒子，显示注册页面
            $('.pinkbox').css('transform', 'translateX(80%)');
            // 隐藏登录表单
            $('.signin').addClass('nodisplay');
            // 显示注册表单
            $('.signup').removeClass('nodisplay');
            $('#signupUsername').val('');
            $('#signupPassword').val('');
        });


        // 当点击登录的时候
        $('#signin').click(function () {
            // 平移粉色的盒子，显示注册页面
            $('.pinkbox').css('transform', 'translateX(0%)');
            // 隐藏注册表单
            $('.signup').addClass('nodisplay');
            // 显示登录表单
            $('.signin').removeClass('nodisplay');
            $('#signinUsername').val('');
            $('#signinPassword').val('');

        });
        document.addEventListener("DOMContentLoaded", function () {
            //注册
            document.getElementById('signupForm').addEventListener('submit', async (event) => {
                event.preventDefault();
                const name = document.getElementById('signupUsername').value;
                const password = document.getElementById('signupPassword').value;
                try {
                    const response = await fetch('http://localhost:8082/reg', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            name: name,
                            password: password
                        })
                    });
                    if (!response.ok) {
                        throw new Error(`HTTP error: ${response.status}`);
                    }
                    const data = await response.text();
                    document.getElementById('response').innerText = data;
                    document.getElementById("signupUsername").innerHTML="";
                    document.getElementById("signupPassword").innerHTML="";
                } catch (error) {
                    document.getElementById('response').innerText = 'Error: ' + error.message;
                }
            });//登录
            document.getElementById('signinForm').addEventListener('submit', async (event) => {
                event.preventDefault();
                const name = document.getElementById('signinUsername').value;
                const password = document.getElementById('signinPassword').value;
                try {
                    const response = await fetch('http://localhost:8082/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            name: name,
                            password: password
                        })
                    });
                    if (!response.ok) {
                        throw new Error(`HTTP error: ${response.status}`);
                    }
                    const data = await response.text();
                    console.log(data)
                    document.getElementById('response').innerText = data;
                    document.getElementById("signinUsername").innerHTML="";
                    document.getElementById("signinPassword").innerHTML="";
                    if(data == "OK")
                    {
                    window.location.href = "./GET.html"
                    }
                } catch (error) {
                    document.getElementById('response').innerText = 'Error: ' + error.message;
                }
            });
        });
    </script>
</body>

</html>